html, body {
  
    font-family: "Metric";
    font-size: 16px;
    margin: 0;
    padding: 0;
    color: #707070;
    background-color: #F6F6F6;
}

li{list-style: none;}a:hover{text-decoration: none;}
.b{border: 1px solid red;}
.center {
    text-align: center;
}
.pos-fix{position:fixed}
.pos-abt{position: absolute;}
.pos-rlt{position: relative;}
.clear{*zoom: 1}
.clear:after { content: '.'; display: block; height: 0; clear: both; visibility: hidden}
/*---------------logo--------------------*/
.main-view{
	height: 100%;
	padding: 0;
}
.login-box{
	min-height: 100%;
}
.login-box .box{
	margin-top: 100px;
}
.row {
    margin-left: 0;
    margin-right: 0;
}
.title{
	text-align:center;
	margin-bottom: 30px;
}
.form-horizontal .form-group {
    margin-left: -15px;
    margin-right: -15px;
}
.login-box .form-horizontal .control-label {
    text-align: right;
}

.forgot{
	text-align: left;
	font-size: 12px;
    padding: 7px 0 0 10px;
    text-decoration: underline;
}

.text{
	color: #707070;
}
.login-box .buttons{
    text-align: center;
    font-weight: 700;
}
.login-box .box button, 
.login-box .box a.btn {
    padding: 4px;
    width: 47%;
    font-weight: 700;
    line-height: 26px;
}
.login-box .box .signup{
	text-align: center;
}
.login-box .box .signup a{
	text-decoration: underline;
}
.login-box .box .message {
    text-align: center;
    color: #f15151;
}

.message {
    text-align: center;
    color: #f15151;
}

/*-------------------nav-----------------*/
.navbar{
	width: 100%;
	left: 0;
	top: 0;
	right: 0;
	z-index: 200;
	margin-bottom: 0;
	border-bottom: 1px solid #eee;
	background: #FFFFFF;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    padding: .5rem 1rem;
}
.navbar .brand{
	/*margin-left: 0;*/
	font-size: 26px;
	color:#707070;
}
.navbar .nav{
	display: flex;
}
.navbar .nav>li{
	padding: 0 5px;
	text-align: center;
	float: left;
	line-height: 40px;
	display: flex;
	display:inline-block;
	vertical-align:middle
}
.navbar .nav>li>a{
	display: inline-block;
	text-shadow:none;
	padding: 5px 15px;
}
/*------------------Allcontent------------------------*/
.DevOps_aas{
	position: relative;
  width: 100%;
  height: auto;
  min-height: 100%;
  min-width:775px;
}
.DevOps_aas:before,
.DevOps_aas:after {
    position: absolute;
    top: 0;
    bottom: 0;
    width: inherit;
    background-color: inherit;
    border: inherit;
    content: "";
}
.Allcontent{
	background: #FFFFFF;
	width: 100%;
	height: 100%;
	top: 60px;
	left: 0;
	right: 0;
	bottom: 0;
}
.Allcontent-center{
	width: 100%;
	height: 100%;
	}
.Allcontent-center .nav-tabs{
	border:0;
	padding:15px 0px;
	margin: 0 auto;
}
.Allcontent-center .nav-tabs>li>a{
	color: #707070;
	border: 0;
}
.Allcontent-center .nav-tabs>li>a:hover{
	color: #707070;
	background: #FFFFFF;
	border: 0;
}
.Allcontent-center .nav-tabs>li.active>a, 
.Allcontent-center .nav-tabs>li.active>a:focus, 
.Allcontent-center .nav-tabs>li.active>a:hover{
	border: 0;
	font-size: 18px;
	background: #FFFFFF;
}
.Allcontent-center .nav-tabs>li.active .box4{
	display: block;
}
.Allcontent-center>.tab-content{
	box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1);
height: calc(100% - 130px);
overflow-y: auto;
}
.tab-content{
	background: #F6F6F6;
}

.tab-content>.container>.row .nav>li>a{
	display: inline-block;
	width: 160px;
	overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  padding-left: 0;
}
.tab-content>.container>.row .nav>li.active>a,
.tab-content>.container>.row .nav>li.active>a:hover,
.tab-content>.container>.row .nav>li.active>a:focus{
	background: none;
}
.tab-content>.container>.row .nav>li>a:hover{
	background: none;
}
.tab-content>.container>.row .nav>li.active>a{
	position: relative;
	text-align: left;
}

.tab-content>.container>.row .nav>li.active>a:after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 5px;
    background: #01A982;
}
.Resources_tab{
	width: 100%;
}
.Resources_tab .tab-pane .panel,
.Project_tab .tab-pane .panel{
	width:100%;
	padding:10px 20px;
	background: #FFFFFF;
	border-top: 3px solid #01A982;
}

#Project{
	height: 100%;
}
#Project>.row{
	width: 100%;height: 100%;
}
.tab-content>.container>.row>.nav{
	width: 200px;
	background: #FFFFFF;
	margin-top: 20px;
	padding: 10px 15px;
}
.tab-content>.container>.row>.nav>li{
	width: 200px;
}
.tab-content>.container>.row>.nav>li>a{
	text-align: left;
}
.tab-content>.container .nav-stacked>li+li{
	margin-left: 25px;
}
.Allcontent-center .nav-tabs>li:hover>a{
	border: 0;
	font-size: 18px;
	background: #FFFFFF;
}
.tab-content>.container>.row>.nav>li:hover>a:after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 5px;
    background: #01A982;
}

.Project_tab{
	position: relative;
	margin-top: 20px;
	margin-left: 20px;
}
@media (min-width: 1200px){
.Project_tab{
	width: 80%;
	}
}
@media (max-width: 1200px) and (min-width: 997px){
.Project_tab{
	width: 76%;
	}
}
@media (max-width: 997px) and (min-width: 768px){
.Project_tab{
	width: 68%;
	}
}

/*---------------input.form-control---------------*/
.form-control:focus {
    outline: 0;
    outline-offset: -4px;
    outline-color: #e3e4e6;
    border: 1px solid #e3e4e6;
    border-color: #e3e4e6;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.has-error .form-control{
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.has-error .help-block, 
.has-error .control-label, 
.has-error .radio, 
.has-error .checkbox, 
.has-error .radio-inline, 
.has-error .checkbox-inline {
    color: #707070;
}
/*---------------btn.color--------------------*/
.addButton .btn{
	padding: 5px 15px;
}
/*.addButtonfix{
	position: fixed;
	float: right;
	top: calc(100% - 130px);
	right: -50px;
}*/
.btn{
    border: 1px solid;
    padding: 1px 15px;
    line-height: 24px;
    background-color: #fff;
    border-color: #e3e4e6;
    color: #707070;
    
    position:relative;
    cursor:pointer;
    transition:800ms ease all;
    outline:none;
}
.btn:hover,
.btn:focus{
	background-color: #F6F6F6;
	color: #707070;
}
.btn-primary{
	background-color: #27c295;
  border-color: #27c295;
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active:focus{
	background-color: #01A982;
	border-color: #01A982;
	text-decoration: none;
	color: #FFFFFF;
	cursor: pointer;
	outline: 0;
}

.btn-default{
	background-color: #F6F6F6;
  border-color: #e3e4e6;
  color: #707070;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active:focus{
	background-color: #707070;
	border-color: #707070;
	text-decoration: none;
	color: #FFFFFF;
	cursor: pointer;
	outline: 0;
}

.box4 {
    position: absolute;
    display: none;
    left: 50%;   
    bottom: -14px;
    margin-left: -15px;
    width: 0px;
    height: 0px;
    z-index: 200;
    border: 13px solid transparent;
    border-bottom-color: #F6F6F6;
}
/*----------------------check--------------*/
.form-checkbox{}
.chk_1 + label {
	background-color: #FFF;
	border: 1px solid #C1CACA;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
	padding: 9px;
	border-radius: 5px;
	display: inline-block;
	position: relative;
	margin-right: 30px;
}
.chk_1 + label:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.chk_1:checked + label {
	background-color: #ECF2F7;
	border: 1px solid #92A1AC;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
	color: #243441;
}

.chk_1:checked + label:after {
	content: '\2714';
	position: absolute;
	top: 0px;
	left: 0px;
	color: #758794;
	width: 100%;
	text-align: center;
	font-size: 1.4em;
	padding: 1px 0 0 0;
	vertical-align: text-top;
}


.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio]{
	margin-left:0px !important;
}
.radio,
.checked{
	height:20px;
	line-height:20px;
	}

@keyframes hover-color {
  from {
    border-color: #c0c0c0; }
  to {
    border-color: #3e97eb; } }
.magic-radio,
.magic-checkbox{
    position: absolute;
    margin:4px 0px !important;
    opacity: 0;
}

.magic-radio[disabled],
.magic-checkbox[disabled] {
    cursor: not-allowed;
}
.magic-radio + label,
.magic-checkbox + label{
    position: relative;
    display: block;
    padding-left: 30px;
    cursor: pointer;
    vertical-align: middle;
    line-height: 20px;
    margin-bottom:10px; 
}
.magic-radio + label:hover:before,
.magic-checkbox + label:hover:before {
    animation-duration: 0.4s;
    animation-fill-mode: both;
    animation-name: hover-color; 
}
.magic-radio + label:before,
.magic-checkbox + label:before {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    content: '';
    background: #cbd1d8; 
}
.magic-radio + label:after,
.magic-checkbox + label:after {
    position: absolute;
    display: none;
    content: ''; 
}

.magic-radio[disabled] + label,
.magic-checkbox[disabled] + label {
    cursor: not-allowed;
    color: #e4e4e4; 
}
.magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after,
.magic-checkbox[disabled] + label:hover,
.magic-checkbox[disabled] + label:before,
.magic-checkbox[disabled] + label:after {
    cursor: not-allowed; 
}
.magic-radio[disabled] + label:hover:before,
.magic-checkbox[disabled] + label:hover:before {
    border: 1px solid #e4e4e4;
    animation-name: none; 
}
.magic-radio[disabled] + label:before,
.magic-checkbox[disabled] + label:before {
    border-color: #e4e4e4; 
}

.magic-radio:checked + label:before,
.magic-checkbox:checked + label:before {
    animation-name: none; 
}

.magic-radio:checked + label:after,
.magic-checkbox:checked + label:after {
    display: block; 
}

.magic-radio + label:before {
    border-radius: 50%;
    background:#cbd1d8;
}

.magic-radio + label:after {
    top: 7px;
    left: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff; 
}

.magic-radio:checked + label:before {
    background:#01A982; 
}

.magic-radio:checked[disabled] + label:before {
    border: 1px solid #c9e2f9; 
}

.magic-radio:checked[disabled] + label:after {
    background: #c9e2f9; 
}

.magic-checkbox + label:before {
    border-radius: 0px; 
}

.magic-checkbox + label:after {
    border-width: 2px;
    border-style: solid;
    border-color: #fff;
    border-top: 0;
    border-left: 0; 
}

.magic-checkbox:checked + label:before {
    width: 20px;
    height: 20px;
    position: absolute;
    color:#ffffff;
    content: '\2713';
    display: inline-block;
    font-size: 16px;
    text-align: center;
    line-height: 20px;
    border: #01a982;
    background: #01a982;
}

.magic-checkbox:checked[disabled] + label:before {
  border: #c9e2f9;
  background: #01a982; }
  

/*------------------table-------------*/
.table>tbody>tr>td, 
.table>tbody>tr>th, 
.table>tfoot>tr>td, 
.table>tfoot>tr>th, 
.table>thead>tr>td, 
.table>thead>tr>th{
	border-top:none ;
	border-bottom: 1px solid #DDDDDD;
}
.table>tbody>tr>td:nth-child(1){
	border-top:1px solid #DDDDDD;
}

/*-------------modal--------*/
.modal-dialog{
	margin: 80px auto;
}
.modal .close{
	outline: 0;
	margin-top: 3px;
}
.modal-body{
	padding: 15px 70px;
}
.modal .control-label{
	font-weight: 100;
}
.modal-footer .btn{
	padding: 5px 20px;
	font-size: 18px;
}



/*-----------------------.panel--------------*/
.panel-footer{
	background: none;
	border: 0;
}
